<template>
  <div class="Navigation">
    <!-- Modal -->
    <div
      class="modal fade"
      id="staticBackdrop"
      data-backdrop="static"
      data-keyboard="false"
      tabindex="-1"
      role="dialog"
      aria-labelledby="staticBackdropLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header position-relative">
            <button
              type="button"
              class="close position-absolute"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <detail class="det"></detail>
          </div>
        </div>
      </div>
    </div>
    <div class="header">
      <div class="header_p">
        <p class="header_p1">{{ title }}</p>
        <p class="header_p2">
          从野兽派建筑到极简主义建筑，这个Unsplash
          Awards类别展示了建筑艺术，试图理解和反思塑造一个地方叙事的建筑。
        </p>
      </div>
      <div class="header_right">
        <div class="header_div">
          <div class="zhuangtai">
            <span class="iconfont icon-shandian"></span>状态
            <div class="header_span">
              <span class="header_span1"></span>打开
            </div>
          </div>
          <div class="guanzhang">
            <span class="iconfont icon-touxiang"></span>
            馆长
            <a href=""
              ><img src="~@/assets/Navigation/imgs/touxiang.jpg" alt=""
            /></a>
            <a href=""
              ><img src="~@/assets/Navigation/imgs/touxiang3.jpg" alt=""
            /></a>
          </div>
          <div class="huifei">
            <span class="iconfont icon-xiangce"></span>
            会费
            <div class="huifei_right">3.9千</div>
          </div>
          <div class="gongxianzhe">
            <span class="iconfont icon-yonghu1"></span>
            杰出贡献者
            <div class="jiechu_img">
              <a href=""
                ><img src="~@/assets/Navigation/imgs/jiechu1.jpg" alt=""
              /></a>
              <a href=""
                ><img src="~@/assets/Navigation/imgs/jiechu2.jpg" alt=""
              /></a>
              <a href=""
                ><img src="~@/assets/Navigation/imgs/jiechu3.jpg" alt=""
              /></a>
              <a href=""
                ><img src="~@/assets/Navigation/imgs/jiechu4.jpg" alt=""
              /></a>
              <a href=""
                ><img src="~@/assets/Navigation/imgs/jiechu5.jpg" alt=""
              /></a>
            </div>
          </div>
        </div>
      </div>
      <button class="anniu">提交</button>
      <div class="index">
        <div class="index_yilou" v-for="(index, item) of this.res" :key="item">
          <div>
            <a data-toggle="modal" data-target="#staticBackdrop"
              ><img :src="index.image" alt=""
            /></a>
          </div>
          <div class="index_yilou_d1">
            <div class="index_yilou_d1_1">
              <a href="/comm">{{ index.subject }}</a>
            </div>
            <div class="index_yilou_d1_2">{{ index.fenlei }}</div>
            <div class="index_yilou_d1_3">
              <a href="/comm">
                <div class="iconfont icon-guankan1">
                  {{ index.views }}
                </div>
                <div class="iconfont icon-pinglun1">
                  {{ index.comment }}
                </div>
                <div class="iconfont icon-zan">{{ index.xihuan }}</div>
              </a>
            </div>
          </div>
          <div class="index_yilou_d1_4">
            <img :src="index.avata" alt="" />
            <a href="">{{ index.uname }}</a>
            <span>{{ index.time }}</span>
          </div>
        </div>
      </div>
      <div class="f">
        <div class="fenye1"><a href="">1</a></div>
        <div class="fenye2"><a href="">2</a></div>
        <div class="fenye2"><a href="">3</a></div>
        <div class="fenye2"><a href="">4</a></div>
        <div class="fenye2"><a href="">5</a></div>
        <div class="fenye3"><a href="">...</a></div>
        <div class="fenye2"><a href="">99</a></div>
        <div class="fenye2"><a href="">100</a></div>
        <div class="fenye2"><a href="">></a></div>
      </div>
    </div>
  </div>
</template>
<style lang="less">
@import url("~@/assets/Navigation/css/navigation.css");
@import url("~@/assets/Navigation/css/font_2025718_lh55ds847i/iconfont.css");

.Navigation {
  // 详情背景
  .det {
    background-color: rgba(0, 0, 0, 0) !important;
  }
  // 模态

  .modal-content {
    border: 0px;
    background-color: rgba(0, 0, 0, 0);
    .modal-header {
      z-index: 20;
      border-bottom: 0px;
      .close {
        left: 6px;
        top: 48px;
        span {
          opacity: 0;
        }
      }
    }
    .modal-body {
      padding: 0px !important;
    }
  }
  ._btn5 {
    z-index: 0;
  }
}

@media (min-width: 576px) {
  .modal-dialog {
    // max-width: 0px;
    margin: 0px;
    max-width: 100%;
  }
}
</style>
<script>
import Detail from "../../views/Detail.vue";
export default {
  props: [""],
  data() {
    return {
      res: [],
      title:""
    };
  },
  components: {
    Detail,
  },

  mounted() {
    // console.log(this.typeId);
    this.axios.get("/navigtion?page=1").then((res) => {
      // console.log(res.data.result);
      this.res = res.data.result;
      this.title=this.res[1].fenlei
      // console.log(this.resa)
    });
  },

  methods: {
    getList(page) {
      this.axios.get(`/navigtion?page=${page}`).then((res) => {
        // console.log(res.data.result);
        this.res = res.data.result;
        this.title=this.res[1].fenlei
      });
    },
  },
  watch: {
    $route(to, from) {
      if (to.path.split("/")[2] == "navigation") {
        this.getList(to.params.typeId);
      }
    },
  },
};
</script>
